<template>
	<view class="content">
		<u-navbar :background="navObj" :is-back="false">
			<mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword"
				@search="doSearch(false)" @confirm="doSearch(false)" v-model="keyword" :isFocusVal="!isShowSeachGoods">
			</mSearch>
		</u-navbar>
		<!-- 搜索默认 -->
		<view class="search-keyword" v-if="!isShowSeachGoods">
			<div class="keyword-box" v-show="!isShowKeywordList">
				<view class="keyword-block add1">
					<view class="keyword-list-header">
						<view class="u-tips">热门搜索</view>
					</view>
					<view class="keyword keywordBox">
						<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)"
							:key="index">{{ keyword }}</view>
					</view>
				</view>
				<view class="keyword-block" v-if="oldKeywordList.length > 0">
					<view class="keyword-list-header">
						<view class="u-tips">搜索历史</view>
					</view>
					<div class="oldKeyList">
						<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index"
							@click="doSearch(keyword)">
							<span>{{ keyword }}</span>
						</div>
					</div>
				</view>

				<div class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</div>
			</div>
		</view>
		<!-- 商品内容 -->
		<view class="goods-content" v-if="isShowSeachGoods">
			<view class="navbar">
				<view class="nav-item" :class="{ current: filterIndex == index }" @click="tabClick(index)" v-for="(item,index) in tapList" :key="index">
					{{item}}
				</view>
			</view>
			
			<div>
				<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
					@scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
					<goodsList />
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>
			</div>
		</view>
		<!-- <div class="empty" v-if="empty">
			<view>
				<image style="width: 320rpx; height: 240rpx" src="/static/nodata.png"></image>
			</view>
			<view>
				<p>没有找到相关的商品信息</p>
				<p>请换一个关键词试试吧</p>
			</view>
		</div> -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import goodsList from '@/components/m-goods-list/list.vue';
	import mSearch from '@/components/m-search-revision/m-search-revision.vue';
	export default {
		data() {
			return {
				empty: false,
				scrollTop: 0,
				loadIndex: 2,
				navObj: {
					background: '#fff'
				},
				goodsHeight: '',
				defaultKeyword: '',
				keyword: '',
				oldKeywordList: ["华为", "dsad", "a", "dsa", "华为", "dsad", "a", "dsa"],
				hotKeywordList: ["华为", "华为Mate60Pro", "华为", "华为Mate60Pro"],
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				isShowSeachGoods: false, // 控制显示搜索内容
				isShowKeywordList: false,
				isSWitch: false,
				tapList: [
					'综合排序','销量'
				]
			};
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(val) {
			// 从首页跳转到分类
			if(val.isShowSeachGoods) {
				this.isShowSeachGoods = val.isShowSeachGoods
			}
		},
		components: {
			mSearch,
			goodsList
		},
		watch: {
			/**
			 * 将搜索的字和热词进行匹配,如果为热词则不改商品搜索关键字
			 */
			keyword(val) {
				if (val) {
					if (val) {
						this.defaultKeyword = val;
					}
				} else {
					this.defaultKeyword = '请输入搜索商品';
				}
			},
		},


		mounted() {
			this.InitialHeight()
		},

		methods: {
			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: res => {
						this.oldKeywordList = [];
					}
				});
			},

			//执行搜索
			doSearch(keyword) {
				this.isShowSeachGoods = true;
				console.log(keyword, '执行了搜索')
			},

			tabClick(index) {
				this.filterIndex = index;
			},

			loadmore() {
				console.log('加载更多')
			},

			InitialHeight() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();

				let topHeight = 0;
				let navHeight = 0;

				uni.getSystemInfo({
					success: function(res) {
						// res - 各种参数

						let top = uni.createSelectorQuery().select('.u-navbar');
						top.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								topHeight = data.height; // 获取元素宽度
							}
						}).exec();
						let nav = uni.createSelectorQuery().select('.navbar');
						nav.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								navHeight = data.height; // 获取元素宽度
							}
						}).exec();
					}
				});
				this.goodsHeight = windowHeight - navHeight - topHeight;
				// #ifdef APP-PLUS
				this.goodsHeight = this.goodsHeight - 100;
				// #endif
				this.goodsHeight += 'px';
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import './search.scss';
</style>
